*
  padding: 0
  margin: 0
:root
  --black: #202020
  --HeaderColorTest: #2e2e2e
  --ButtonColor: #b3c03e
body
  width: 100%
  background-color: var(--black)
.container
  margin: 0 auto
  max-width: 1600px
  width: 100%
  // background-color: #757575
  margin: 0px auto 40px auto
.container-header
  margin: 0 auto
  max-width: 1600px // 1400px
  width: 100%
.container-home
  margin: 0 auto
  width: 100%
  // max-width: 1600px
.opacity
  width: 100%
  height: 100%
  background-color: #20202094
.active
  background-color: var(--ButtonColor)
  color: var(--HeaderColorTest)
  font-weight: 700
  &:first-child
    border-top-left-radius: 10px
    border-top-right-radius: 10px
  &:last-child
    border-bottom-left-radius: 10px
    border-bottom-right-radius: 10px
.NavActive
  color: var(--ButtonColor)
  font-weight: 800
.Nav
  grid-row: 2
  grid-column: 1
.Title
  margin: 0 auto
  margin-bottom: 20px
  grid-column-start: 1
  grid-column-end: 4
  display: grid
  @media screen and (max-width: 468px)
    grid-column: 1
    grid-row: 2
.Children
  grid-row: 2
  grid-column: 2
  @media screen and (max-width: 468px)
    grid-row: 3
    grid-column: 1
.Genre
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  grid-gap: 0 36px
  @media screen and (max-width: 1173px)
    justify-items: center